<template>
  <div class="dev-tooltip">
    <bf-tooltip content="top" placement="top">
      <bf-button>top</bf-button>
    </bf-tooltip>
    <bf-tooltip content="top-starttop-starttop-starttop-start" placement="top-start">
      <bf-button>top-start</bf-button>
    </bf-tooltip>
    <bf-tooltip content="top-endtop-endtop-endtop-endtop-end" placement="top-end">
      <bf-button>top-end</bf-button>
    </bf-tooltip>
    <br />
    <bf-tooltip content="bottombottombottombottombottom" placement="bottom">
      <bf-button>bottom</bf-button>
    </bf-tooltip>
    <bf-tooltip content="bottom-startbottom-startbottom-startbottom-start" placement="bottom-start">
      <bf-button>bottom-start</bf-button>
    </bf-tooltip>
    <bf-tooltip content="bottom-endbottom-endbottom-endbottom-endbottom-end" placement="bottom-end">
      <bf-button>bottom-end</bf-button>
    </bf-tooltip>
    <br />
    <bf-tooltip content="leftleftleftleftleftleftleftleftleftleftleftleft" placement="left">
      <bf-button>left</bf-button>
    </bf-tooltip>
    <bf-tooltip content="left-startleft-startleft-startleft-startleft-start" placement="left-start">
      <bf-button>left-start</bf-button>
    </bf-tooltip>
    <bf-tooltip
      content="left-endleft-endleft-endleft-endleft-endleft-endleft-end"
      placement="left-end"
    >
      <bf-button>left-end</bf-button>
    </bf-tooltip>
    <br />
    <bf-tooltip content="rightrightrightrightrightrightrightrightrightrightright" placement="right">
      <bf-button>right</bf-button>
    </bf-tooltip>
    <bf-tooltip content="right-startright-startright-startright-start" placement="right-start">
      <bf-button>right-start</bf-button>
    </bf-tooltip>
    <bf-tooltip content="right-endright-endright-endright-endright-end" placement="right-end">
      <bf-button>right-end</bf-button>
    </bf-tooltip>
    <br />
    <h4>自定义背景色及文字颜色</h4>
    <bf-tooltip
      content="custom-colorcustom-colorcustom-colorcustom-color"
      background-color="red"
      text-color="#ffffff"
      placement="bottom"
    >
      <bf-button>custom-color</bf-button>
    </bf-tooltip>
    <bf-tooltip
      content="2d8cf0-color2d8cf0-color2d8cf0-color2d8cf0-color"
      background-color="#2d8cf0"
      text-color="#ffffff"
      placement="bottom"
    >
      <bf-button>2d8cf0-color</bf-button>
    </bf-tooltip>
    <h4>slot</h4>
    <bf-tooltip placement="bottom">
      <div slot="content">slots-contentslots-contentslots-content</div>
      <bf-button>slots-content</bf-button>
    </bf-tooltip>
    <h4>设置最大宽度，超出换行</h4>
    <bf-tooltip placement="bottom" maxWidth="200px">
      <div slot="content">slots-contentslots-contentslots-contentslots-contentslots-content</div>
      <bf-button>slots-content</bf-button>
    </bf-tooltip>
  </div>
</template>
